<template>

   <div class="seconds-box">
      <div class="seconds-header">
         <span>嗨购秒杀</span>
         <span>10点场</span>
         <span class="countdown-box">
            <van-count-down :time="time">
               <template #default="timeData">
                  <span class="block">{{ timeData.hours }}</span>
                  <span class="colon">:</span>
                  <span class="block">{{ timeData.minutes }}</span>
                  <span class="colon">:</span>
                  <span class="block">{{ timeData.seconds }}</span>
               </template>
            </van-count-down>
         </span>
         <span>爆款轮番秒</span>
      </div>

      <ul class="seconds-list">
         <li v-for="item in imgs">
            <img  :key="item.proid" :src="item.img1">
            <p>{{ item.originprice }}</p>
         </li>
      </ul>
   </div>
</template>
<script>
export default {
   data() {
      return {
         time: 2 * 60 * 60 * 1000,
         imgs: []
      }
   },
   created() {
      this.$http.get("pro/seckilllist", {
         params: {
            count: 1,
            limitNum: 3
         }
      })
         .then(res => {
            if (res.data.code === "200") {
               this.imgs = res.data.data
            }
         })
   }

}
</script>
   
<style scoped>
.seconds-box {
   width: 100%;
   height: 8.125rem;
   /* background-color: skyblue; */

}

.seconds-header {
   display: flex;
   width: 100%;
   height: 2.5rem;
   /* border: 1px solid black; */
   justify-content: space-around;
   align-items: center;
   background: url() no-repeat center center;
   background-size: cover;
}

/* .seconds-header>span{
      border:1px solid black
   } */
.countdown-box {
   width: 140px;
}

.seconds-list {
   width: 100%;
   height: 5.625rem;
   background-color: pink;
   display: flex;
}

.seconds-list img {
   width: 3.75rem;
   height: 3.75rem;

}

.colon {
   display: inline-block;
   margin: 0 4px;
   color: #ee0a24;
}

.block {
   display: inline-block;
   width: 18px;
   color: #fff;
   font-size: 12px;
   text-align: center;
   background-color: #ee0a24;
   border-radius: 5px;
}
</style>